/*
* @Author: jh
* @Date: 2018/4/10
* @description: 系统 角色列表
*/
<template>
  <div>   
    <!-- <div class="p-30">角色列表</div> -->
      <!-- <el-row class="custom-title">
        <h3>角色列表</h3>
      </el-row> -->
      <el-row>
        <el-col :span='8'>
            <el-input v-model="roleListSearch.roleName" placeholder="请输入角色名" @keyup.enter.native="getList">
              <el-button @click="getList" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </el-col>
        <el-col :span='16'>
            <el-button  class="pull-right" round @click="toDetail('-1')" type="primary">添加</el-button>
        </el-col>
      </el-row>
      <!-- 添加页面 -->
       <Add v-if="showAdd" :isShowAddFun="isShowAddFun" :id="id" @getList='getList'></Add>
       <!-- 权限页面 -->
       <Auth v-if="showAuth" :isShowAuthFun="isShowAuthFun" :id="id" @getList='getList'></Auth>       
      <div class="m-t-15">
                <el-table
                    :data="tableData"
                    >
                    <el-table-column
                        property="roleId"
                        label="ID"
                        width="80"
                        align="center">
                    </el-table-column>
                    <el-table-column
                        property="roleName"
                        label="角色名称" 
                        show-overflow-tooltip>
                        <!-- <template slot-scope="scope">
                            <el-tooltip :content="scope.row.roleName" placement="top" class="item">
                               <el-button  type="text" class="ca-text-over-flow-ellipsis"  :disabled="!isAuthEdit" @click="toDetail(scope.row)">{{ scope.row.roleName }}</el-button>
                            </el-tooltip>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="countMember"
                        label="成员数量">
                        <template slot-scope="scope">
                             <el-button type="text" @click="toUser(scope.row.roleId)">{{scope.row.countMember}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="createrName"
                        label="创建人">
                        <!-- <template slot-scope="scope">
                            <el-button type="text" @click="toUser(scope.row)"> {{ scope.row.userCount }}</el-button>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="createTime"
                        label="创建时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.createTime | cmsMoment('YYYY-MM-DD HH:mm:ss') }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="modifierName"
                        label="编辑人">
                        <!-- <template slot-scope="scope">
                            <span>{{scope.row.roleStatus | getNameById('dataEnable')}}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        property="modifyTime"
                        label="更新时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.modifyTime | cmsMoment('YYYY-MM-DD HH:mm:ss')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        width="150px"
                        label="操作">
                        <template slot-scope="scope">
                            <el-button  type="text" @click="toAuth(scope.row.roleId)">权限分配</el-button>
                            <el-button  type="text" @click="toDetail(scope.row.roleId)">编辑</el-button>
                            <el-button  type="text" @click="deleteConfirm(scope.row.roleId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination class="align-center m-t-30"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="[10, 20, 30, 40]"
                           :page-size="pageParam.pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalCount">
            </el-pagination>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Watch } from 'vue-property-decorator';
import Add from './add.vue'; //组件
import Auth from './auth.vue'; //组件
import RoleService from '../../../service/system-config/role'; // 接口
import { PageParam, SysRoleInfoVO } from '../../../api/Interface'; // 接口
import { sysRoleSearchDto } from '../../../service/system-config/systemInterface';
import { getParamsForList, setParamsForList } from '../../../libs/utils';
// interface TableData {
//    [index: number]: object;
// }
@Component({
  components: { 
      Add,
      Auth
  }
})
export default class CompanyList extends Vue {
  // 初始化数据 相当于data
  public msg: number = 123;
  public roleListSearch: sysRoleSearchDto = {} as sysRoleSearchDto ; // 表单数据
  public tableData: SysRoleInfoVO[] = [] as SysRoleInfoVO[]; // 后台数据
  public pageParam: PageParam = {
      pageIndex: 1,
      pageSize: 10,
  } as PageParam;
  public totalCount: number = 0; // 总数
  public currentPage: number = 1; // 当前页
  public showAdd: boolean = false; // 是否显示 添加页
  public id: string = '-1'; // 角色id
  public showAuth: boolean = false; // 是否显示 权限页
  // refs
  public $refs: { };

  // watch
  @Watch('msg')
  public onChildChanged(val: string, oldVal: string) {
    return val + '***';
  }

  // 声明周期钩子
  public mounted() {
    // 获取local中存储的搜索条件
    const routerName = this.$root.$route.name;
    const localParams = getParamsForList(routerName);
    this.roleListSearch = Object.assign({}, this.roleListSearch, localParams.searchParams);
    this.pageParam = Object.assign({}, this.pageParam, localParams.pageParam);
    // 获取local中存储的搜索条件 end
    this.getList();
  }
  public created() {
      //
  }
  // 跳转到角色下的用户
  public toUser(roleId: string) {
    this.$router.push({ name: 'user-list-role', params: { roleId }});
  }
  // 方法
  public async getList() {
     //重构数据
     this.roleListSearch['pageParam.pageIndex'] = this.pageParam.pageIndex;
     this.roleListSearch['pageParam.pageSize'] = this.pageParam.pageSize;
     // local中存当前搜索条件 
    const params = {
      pageParam: this.pageParam,
      searchParams: this.roleListSearch,
    };
    const routerName = this.$root.$route.name;
    setParamsForList(params, routerName);
    // local中存当前搜索条件 end
     const res = await RoleService.sysRolePage(this.roleListSearch);
      // console.log(res,'ppppp');
     this.tableData = res.resultData;
     this.totalCount = res.totalCount;
  }
  // pageSize 改变时会触发
  public handleSizeChange(val: number) {
      this.pageParam.pageSize = val;
      this.getList();
  }
  // 当前页改变时会触发
  public handleCurrentChange(val: number) {
      this.pageParam.pageIndex = val;
      this.getList();
  }
  public isShowAddFun() {
      this.showAdd = !this.showAdd;
  }
  public isShowAuthFun() {
      this.showAuth = !this.showAuth;
  }
  // 跳转到编辑页
  public toDetail(id: string) {
      this.id = id; 
      this.isShowAddFun();
  }
  public toAuth(id: string) {
      this.id = id; 
      this.isShowAuthFun();
  }
  // 删除确认
  public deleteConfirm(id: string) {
      this.$confirm('是否删除此角色?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            //删除方法
           this.deleteDate(id);
        });
  }
  //删除方法
   public async deleteDate(id: string) {
        const params = {roleId: id};
        const res = await RoleService.sysRoleDelete(params);
        if (res.resCode === '0') {
            this.$message({
                type: 'success',
                message: '角色删除成功!',
                center: true,
            });
            this.getList();    
        }
   }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
